<template>
    <div class="my-header">
      <el-tabs v-model="data.activeName" class="demo-tabs">
        <el-tab-pane label="学术论著" name="first">
          <el-form
            :rules="rules"
            ref="ruleFormRef"
            :model="ruleForm"
            label-width="150px"
            class="demo-ruleForm"
            status-icon
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="申请奖励作者的排名" prop="ranking">
                  <el-input-number
                    :min="1"
                    type=""
                    placeholder=""
                    v-model="ruleForm.ranking"
                    style="width: 150px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学术论著名称" prop="name">
                  <el-input placeholder="" v-model="ruleForm.name" style="width: 150px" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="专著/期刊名称" prop="monographName">
                  <el-input
                    placeholder=""
                    v-model="ruleForm.monographName"
                    style="width: 150px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="书号/刊号" prop="isbnBookNo">
                  <el-input
                    placeholder=""
                    v-model="ruleForm.isbnBookNo"
                    style="width: 150px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="作者(单位)" prop="unitName">
                  <!-- <el-input placeholder="" v-model="ruleForm.unitName" style="width: 150px" /> -->
                  <popup-tree-input
                    :data="orgAllList"
                    :props="data.popupTreeProps"
                    :prop="ruleForm.unitName"
                    :node-key="'' + deptForm.parentId"
                    :current-change-handle="changeValue"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发表日期" prop="publicationDate">
                  <el-date-picker
                    v-model="ruleForm.publicationDate"
                    type="date"
                    placeholder="发表日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 150px; margin-right: 15px"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="杂志等级" prop="workLevel">
                  <el-input
                    placeholder=""
                    v-model="ruleForm.workLevel"
                    style="width: 150px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="奖励标准" prop="incentivestandard">
                  <SelectOption
                    :selectValue="ruleForm.incentivestandard"
                    :options="options.jlbzList"
                    @change-value="changeValue3"
                  >
                  </SelectOption>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script lang="ts">
  import PopupTreeInput from "@/views/science/components/PopupTreeInput/index.vue";
import SelectOption from "@/views/science/components/selectOption/index.vue";
import { computed, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
  export default {
    components: {
      SelectOption,
      PopupTreeInput,
    },
    emits: {
      usersChange: null,
      paramsChange: null,
      valueFlag2: null,
    },
    props: {
      fbData: {
        type: Object,
        required: true,
      },
      addFlag: {
        type: Number,
        required: true,
      },
      orgAllList: {
        type: Array,
        required: true,
      },
    },
    setup(props, { emit }) {
      const store = useStore();
      const labelPosition = ref("right");
      const deptForm = {
        parentId: 0,
        parentName: "",
      };
      const data = reactive({
        activeName: ref("first"),
        dialogVisible: false,
        lobarDisabled: false,
        popupTreeProps: {
          label: "name",
          children: "children",
        },
        props: {
          multiple: true,
          expandTrigger: "hover",
          value: "id",
          label: "name",
          children: "children",
          emitPath: false,
        },
        mainValue: [],
        mainValue1: [],
        chooseMatterList: [],
      });
  
      // 弹窗中三个下拉选择
      let options = reactive({
        projectnameList: computed(
          () => store.state.technologyStrength.KJSL_DECLARATION_TYPE
        ),
        unitnameList: computed(
          () => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1
        ),
  
        userAllList: computed(() => store.state.technologyStrength.userAllList),
        roleList: computed(() => store.state.technologyStrength.roleList),
        projectSelect: computed(() => store.state.technologyStrength.projectSelect),
        // hjTypeList: computed(() => store.state.technologyStrength.KJSL_AWARD_CATEGORY),
  
        hjjbList: computed(() => store.state.technologyStrength.KHGL_KJSL_HJJB),
        hjTypeList: [],
        hjdjList: [],
        jlbzList: [
          {
            id: "1",
            itemText: "SCI 收录期刊论文0.5万",
            itemValue: 0.5,
          },
          {
            id: "2",
            itemText:
              "EI、ISTP 收录或在国际学告，不包含中国出版的外文版期刊。术期刊论文0.3万",
            itemValue: 0.3,
          },
          {
            id: "3",
            itemText: "中国交建优秀论文0.3万",
            itemValue: 0.3,
          },
          {
            id: "4",
            itemText: "正式出版有书号的与公路行业相关的专著2万",
            itemValue: 2,
          },
        ],
      });
  
      const composition = ref(props.fbData);
      // 提交表单-字段对照新增接口-然后同步
      const ruleForm = reactive({
        id: "",
        awardApplyId: "1",
        ranking: "",
        rankingId: "",
        name: "",
        monographName: "",
        isbnBookNo: "",
        unitName: "",
        unitId: "",
        publicationDate: "",
        workLevel: "",
        workLevelId: "",
        incentivestandard: "",
        incentivestandardid: "",
      });
  
      const handleData = (data) => {
        const arr1 = Object.keys(data);
        const list = ruleForm;
        for (const key in list) {
          if (arr1.indexOf(key) !== -1) {
            list[key] = data[key];
          }
        }
        return list;
      };
  
      if (props.fbData) Object.assign(ruleForm, handleData(props.fbData));
      watch(props, (newValue, oldValue) => {
        composition.value = newValue.fbData;
        Object.assign(ruleForm, handleData(newValue.fbData));
      });
  
      watch(ruleForm, (newValue, oldValue) => {
        emit("paramsChange", newValue);
      });
  
      // watch(
      //     () => props.addFlag,
      //     (newVal, oldVal) => {
      //         Object.keys(ruleForm).forEach((key) => {
      //             ruleForm[key] = ''
      //         })
      //     }
      // )
  
      const changeValue = (item) => {
        ruleForm.unitId = item.id;
        ruleForm.unitName = item.name;
      };
      const changeValue3 = (item) => {
        ruleForm.incentivestandard = item.itemText;
        ruleForm.incentivestandardid = item.itemValue;
      };
      // 新增
      const rules = reactive({
        ranking: [
          { required: true, message: "请输入申请奖励作者的排名", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入学术论著名称", trigger: "change" }],
        monographName: [
          { required: true, message: "请输入专著/期刊名称", trigger: "change" },
        ],
        isbnBookNo: [{ required: true, message: "请输入书号/刊号", trigger: "blur" }],
        unitName: [{ required: true, message: "请输入作者(单位)", trigger: "change" }],
        publicationDate: [{ required: true, message: "请输入发表日期", trigger: "change" }],
        workLevel: [{ required: true, message: "请输入杂志等级", trigger: "blur" }],
        incentivestandard: [{ required: true, message: "请输入奖励标准", trigger: "blur" }],
      });
  
      const ruleFormRef = ref();
      const submitForm = async () => {
        ruleFormRef.value.validate((valid) => {
          if (valid) {
            emit("valueFlag2", true);
          } else {
            emit("valueFlag2", false);
          }
        });
      };
  
      return {
        open,
        ruleForm,
        rules,
        ruleFormRef,
        labelPosition,
        deptForm,
        data,
        options,
  
        changeValue,
        submitForm,
        changeValue3,
      };
    },
  };
  </script>
  <style lang="scss" scoped>
  .personAddBtn {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  
  .demo-form-inline .el-form-item {
    width: 48%;
  }
  
  :deep(.labelHeight .el-form-item__label) {
    line-height: 20px;
  }
  
  :deep(.el-date-editor.el-input) {
    width: 100%;
  }
  
  :deep(.el-date-editor.el-input__inner) {
    width: 100%;
  }
  
  :deep(.demo-form-inline .el-select) {
    width: 100%;
    margin: 0;
  }
  
  .el-select {
    width: 100%;
    margin: 0;
  }
  
  .selectLabel {
    width: 70%;
    min-height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
  }
  
  .addLabel {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #169bd5;
    border-radius: 6px;
    color: #fff;
    margin-left: 15px;
  }
  
  .unitBox {
    width: 100%;
    margin: 30px 0;
  
    .title {
      padding: 15px 0;
      border-bottom: 1px solid #ccc;
    }
  
    .tagBox {
      line-height: 40px;
      margin-top: 15px;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 10px 15px;
    }
  }
  
  .el-tag {
    margin-right: 10px;
  }
  
  .content-box {
    width: 250px;
    height: 33px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .select {
    color: #eee;
  }
  
  .align-center {
    align-items: center;
  }
  
  .space-between {
    justify-content: space-between;
  }
  
  .mt20 {
    margin-top: 20px;
  }
  
  .flex {
    display: flex;
  }
  
  .handle {
    position: absolute;
    top: 17px;
    right: 20px;
    display: flex;
    align-items: center;
  }
  
  .search-box {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
  }
  </style>
  